<template>
  <div class="container">
    <div class="app-container">
      <!-- 组织架构树形展示 -->
      <el-tree :data="departmentsTree" :props="defaultProps" :default-expand-all="true" :expand-on-click-node="false" empty-text="暂无数据" highlight-current>
        <template #default="{ data }">
          <el-row style="width: 100%; height: 40px;" type="flex" justify="space-between" align="middle">
            <!-- 部门名称 -->
            <el-col>{{ data.name }}</el-col>
            <el-col style="width: 200px">
              <el-row style="width: 100%; height: 100%;" type="flex" justify="space-between" align="middle">
                <!-- 负责人名称 -->
                <el-col>
                  <span>{{ data.managerName }}</span>
                </el-col>
                <!-- 部门相关操作 -->
                <el-col :span="10">
                  <el-dropdown @command="onOperateDepartment($event, data.id)">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-permission="'add-department'" command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item v-permission="'delete-department'" command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <!-- 操作部门弹窗 -->
      <DepartmentDialog ref="addDepartmentRef" :departments="departments" @updateDepartments="getDepartmentList" />
    </div>
  </div>
</template>

<script>
import { getDepartmentListAPI, deleteDepartmentAPI } from '@/api/department'
import { transListToTreeData } from '@/utils/index'

import DepartmentDialog from './components/DepartmentDialog'

export default {
  name: 'Department',
  components: {
    DepartmentDialog
  },
  data() {
    return {
      departments: [], // 组织架构列表，对象数组结构
      // el-tree组件配置项
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    // 组织架构树形结构列表
    departmentsTree() {
      // 将对象数组列表转化为树形列表结构
      return transListToTreeData(this.departments, 0)
    }
  },
  created() {
    // 获取组织列表
    this.getDepartmentList()
  },
  methods: {
    // 获取组织列表
    async getDepartmentList() {
      this.departments = await getDepartmentListAPI()
    },

    // 操作组织架构
    async onOperateDepartment(type, id) {
      if (type === 'add' || type === 'edit') {
        // 打开操作部门的弹窗
        this.$refs.addDepartmentRef.open(type, id)
      } else {
        // 删除该部门
        // 弹出确认删除弹窗
        await this.$confirm('您确定要删除该部门吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 发送删除部门请求
        await deleteDepartmentAPI(id)
        // 提示删除成功
        this.$message.success('删除部门成功')
        // 刷新列表
        this.getDepartmentList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
  // 下拉操作菜单样式
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    .el-icon-arrow-down {
    font-size: 12px;
  }
  }
}
</style>
